<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<style type="text/css">
			html,body{
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}
			.outer {
			    width: 100%;
			    height: 100%;
			    display: flex;
			    flex-wrap: wrap;
			    justify-content: center;
			    align-items: center;
    
}


.inner {
	width: 300px;
	height: 300px;
    /*开启3D视图*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: 0.5s all linear;
}
#d1,#d2,#d3,#d4,#d5,#d6{
	position: absolute;
	
	width: 300px;
	height: 300px;
	display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#d1{
	background-color: red;
   transform-origin: 50% 50%;
    transform: rotateZ(0);
   
}
#d2{
	background-color: blue;
    transform-origin: 0% 100%;
    transform: rotateY(-90deg);
}	
#d3{
	background-color: yellow;
    transform-origin: 100% 0%;
    transform: rotateY(90deg);
}			
#d4{
	background-color: palegreen;
    transform: rotateX(90deg);
   	transform-origin: 100% 0%;
}	
#d5{
	background-color: pink;
    transform-origin: 0% 100%;
    transform: rotateX(-90deg);
}	
#d6{
	background-color: burlywood;
    transform-origin: 50% 50%;
    transform: rotateZ(360deg);
}

#t1:checked ~ .inner {
	transform-origin: 0% 0%;
		-webkit-transform:  translateZ(0px) rotateX(0deg) rotateY(0deg);
}
#t2:checked ~ .inner {
	transform-origin: 0% 0%;
		-webkit-transform: translateZ(-300px) rotateX(0deg) rotateY(90deg) ;
}
#t3:checked ~ .inner {
	transform-origin: 100% 100%;
		-webkit-transform: translateZ(0px) rotateX(0deg) rotateY(-90deg);
}
#t4:checked ~ .inner {
	transform-origin: 0% 0%;
		-webkit-transform: translateZ(0px) rotateX(-90deg) rotateY(0deg);
}
#t5:checked ~ .inner {
	transform-origin: 100% 100%;
		-webkit-transform: translateZ(0px) rotateX(90deg) rotateY(0deg);
}

input{
	display: none;
}

		</style>
	</head>
	<body>
		<div class="outer">
				<label class="t1" for="t1">跳转1</label>
				<label class="t2" for="t2">跳转2</label>
        		<label class="t3" for="t3">跳转3</label>
        		<label class="t4" for="t4">跳转4</label>
        		<label class="t5" for="t5">跳转5</label>
				<input type="radio" id="t1" name="tab" />
        		<input type="radio" id="t2" name="tab" />
        		<input type="radio" id="t3" name="tab" />
        		<input type="radio" id="t4" name="tab" />
        		<input type="radio" id="t5" name="tab"/>
        	<div class="inner">
        		<div id="d1">我是第1页</div>
        		<div id="d2">我是第2页</div>
        		<div id="d3">我是第3页</div>
        		<div id="d4">我是第4页</div>
        		<div id="d5">我是第5页</div>
        	</div>
        </div>
	</body>
</html>
